<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta name="keywords" content="ui,gui,prototyping,designer,builder,rad,ria,spa,no-code,codeless,without coding,programming,development,drag and drop,web application,build app,create app,make app" />
    <meta name="description" content="Powered by CrossUI No-Code App Builder - Create Interactive App Without Coding" />
    <meta name="copyright" content="copyright@crossui.com" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Powered by CrossUI No-Code App Builder - Examples - Complicated Ajax</title>
</head>
    <body>
        <div id="loading" style="position:fixed;width:100%;text-align:center;"><img src="../../../../runtime/loading.gif" alt="Loading..." /></div>
        <div style='height:20px;'></div>
        <div id='layout' style="margin:0 auto;width:680px;border:solid 1px;padding:4px;">
            <div>
                <div> <button id='ajax_get'>Click me to trigger the request thread</button></div><br />

                <p style="font-weight:bold">Monitor:</p>
                <div id='monitor' style='border: dashed 1px #ccc;background-color:#FFFF00;height:auto!important;height:50px;min-height:50px;'>
                </div>
                <br /><br />
                <p style="font-weight:bold">Response data:</p>
                <textarea id='response' style='width:100%;height:180px;' readonly=readonly>
                </textarea>
             </div>
        </div>

        <script type="text/javascript" src="../../../../runtime/xui/js/xui-debug.js"></script>
        <script type="text/javascript">
            xui.main(function(){
                xui('loading').remove();

                var trace=function(str,tid){
                    xui('monitor').append(xui.create('<p>'+str+ (tid?' threadid:'+tid:'')+' </p>'));
                };

                //use xui.Ajax get method
                xui('ajax_get').onClick(function(){
                    xui('response').attr('value','');
                    xui('monitor').empty();

                    xui.Thread.observableRun(function(threadid){
                        xui.Ajax({
                            uri:'first.js',
                            threadid:threadid,

                            //get the second service uri from the first request
                            onSuccess: function(obj,type,threadid){
                                trace('the first onSuccess',this.threadid);
                                xui.Dom.byId('response').value += xui.stringify(obj) + "\n";

                                xui.Ajax({
                                    uri:obj.nexturi,
                                    threadid:threadid,

                                    //get the thrid service uri from the second request
                                    onSuccess:function(obj){
                                        trace('the second onSuccess',this.threadid);
                                        xui.Dom.byId('response').value += xui.stringify(obj) + '\n';

                                        xui.Thread.suspend(threadid);
                                        trace('--thread' + threadid +' is suspended here.');
                                        xui.absIO.groupCall({
                                            'third':xui.Ajax({
                                                uri:obj.nexturi1,
                                                threadid:threadid,
                                                onSuccess:function(obj){
                                                    trace('the third onSuccess',this.threadid);
                                                    xui.Dom.byId('response').value += xui.stringify(obj) +'\n';
                                                },
                                                onStart:function(){trace('the third onStart',this.threadid)},
                                                onEnd:function(){trace('the third onEnd',this.threadid)}
                                            }),
                                            'fourth':xui.Ajax({
                                                uri:obj.nexturi2,
                                                threadid:threadid,
                                                onSuccess:function(obj){
                                                    trace('the fourth onSuccess',this.threadid);
                                                    xui.Dom.byId('response').value += xui.stringify(obj) +'\n';
                                                },
                                                onStart:function(){trace('the fourth onStart',this.threadid)},
                                                onEnd:function(){trace('the fourth onEnd',this.threadid)}
                                            })
                                        },null,function(){
                                            trace('the group start',this.threadid);
                                        },function(){
                                            trace('the group end',this.threadid);
                                            xui.Thread.resume(threadid);
                                            trace('--thread' + threadid +' is resumed here');
                                        });
                                    },
                                    onStart:function(){trace('the second onStart',this.threadid)},
                                    onEnd:function(){trace('the second onEnd',this.threadid)}
                                }).start();
                            },
                            onStart:function(){trace('the first onStart',this.threadid)},
                            onEnd:function(){trace('the first onEnd',this.threadid)}
                        }).start();
                    });
                });
            });
        </script>

<!-- CrossUI Team License code: 201302-A347-DDA31C-61-->
<style>#xuibar a, #xuibar span{font-size:12px;margin-right:2px;padding:2px;}#xuibar a{text-decoration:underline;}#xuibar_more a{text-decoration:none;padding:3px;font-size:12px;text-decoration:none;display:block;}#xuibar a:hover, #xuibar_more a:hover{text-decoration:none;color:#fff!important;background:#598EDD;}#xuibar small{font-size:9px;}#xuibar_more{position:absolute;display:none;top:19px;z-index:6000;border:solid 1px;border-color:#E4F1FD #598EDD #598EDD #598EDD; background:#E4F1FD;}#xuibar_more{width:100px;}</style><script>var xuibar={byId:function(id){return document.getElementById(id).style},get1:function(){return this.byId('xuibar')},get2:function(id){return this.byId(id)},get3:function(){return this.byId('xuibar_l')},show:function(){var n=this;if(n._t1){clearTimeout(n._t1);delete n._t1;}var s=n.get1();s.height='19px';s.backgroundColor='#E4F1FD';n.get3().display='block';},hide:function(){var n=this;if(n._t1){clearTimeout(n._t1);delete n._t1;}n._t1=setTimeout(function(){var s=n.get1();s.height='3px';s.backgroundColor='#598EDD';n.get3().display='none';if(n.showed)n.get2(n.showed).display='none';},600);},showPop:function(ele){var n=this,id=ele.id.replace(/.*:/,'');if(n.showed&&id!=n.showed)n.get2(n.showed).display='none';if(n._t1){clearTimeout(n._t1);delete n._t1;}if(n._t2){clearTimeout(n._t2);delete n._t2;}n.showed=id;if(ele.id.indexOf('pop:')==0){var s=n.get2(id);s.left=(ele.offsetLeft-4)+'px';s.display='block';}},hidePop:function(){var n=this;if(n._t2){clearTimeout(n._t2);delete n._t2;}n._t2=setTimeout(function(){n.get2('xuibar_more').display='none';},100);n.hide();}};</script><div id='xuibar' onmouseout="xuibar.hide()"  onmouseover="xuibar.show()" style='position:absolute;width:100%;left:0;top:0;height:3px;z-index:5000;background:#598EDD;line-height:19px;overflow:hidden;'><nobr><a target=_blank href='https://www.crossui.com'><strong>CrossUI Home</strong></a><a target=_blank href='https://www.crossui.com/RADGithub'>RAD Tools</a><a target=_blank href='https://www.crossui.com/xui/Examples'>Examples</a><a target=_blank href='https://www.crossui.com/FormBuilder'>Form Builder</a><a target=_blank href='https://www.crossui.com/FCEditor'>FusionCharts Editor</a><a target=_blank href='https://www.crossui.com/JSONEditor'>JSONEditor</a><a target=_blank href='https://www.crossui.com/xui/API/index.html'>API</a><!--a target=_blank href='https://www.crossui.com/Forum'>Forum</a--><a target=_blank href='https://www.crossui.com/order.html'><strong>Buy Now</strong></a></nobr></div><div id='xuibar_l' style="left:0;position:absolute;top:19px;display:none;border-top:1px solid #598EDD;font-size:0;line-height:0;width:100%;z-index:5500;"></div><script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-59755ed8d0255613"></script>
<script>setTimeout(function(){(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-39926100-1', 'crossui.com');ga('send', 'pageview');},100);</script>

</body>
</html>